﻿<template>
  <a-modal
    :title="title"
    width="70%"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleSubmit"
    @cancel="
      () => {
        this.visible = false
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
        <a-collapse accordion default-active-key="1" :bordered="false" v-model="activeKey">
          <a-collapse-panel :style="customStyle" key="1" header="服务商基本信息">
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="出租人姓名" prop="EmpName">
                  <a-input v-model="entity.EmpName" autocomplete="off" />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="身份证号码" prop="IdCardNo">
                  <a-input v-model="entity.IdCardNo" autocomplete="off" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="联系电话" prop="EmpPhone">
                  <a-input v-model="entity.EmpPhone" autocomplete="off" />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="银行卡号" prop="BankCardNo">
                  <a-input v-model="entity.BankCardNo" autocomplete="off" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="银行名称" prop="BankName">
                  <a-input v-model="entity.BankName" autocomplete="off" />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="邮箱" prop="Email">
                  <a-input v-model="entity.Email" autocomplete="off" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
            <a-form-model-item label="地址" prop="EmpAddress">
              <a-input type="textarea" :rows="3" v-model="entity.EmpAddress" autocomplete="off" />
            </a-form-model-item>
              </a-col>
            </a-row>
            
          </a-collapse-panel>
          <a-collapse-panel :style="customStyle" key="2" header="上传资料">
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="身份证照片" prop="idCardPhoto">
                <a-upload
                name="avatar"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                :customRequest="selfUpload1"
                :before-upload="beforeUpload"
              >
                <img
                  v-if="entity.idCardPhoto"
                  style="width: 120px; height: 120px"
                  :src="entity.idCardPhoto"
                  alt="身份证照片"
                />
                <div v-else>
                  <a-icon :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">身份证照片</div>
                </div>
              </a-upload>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="身份证反面照片" prop="idCardBackPhoto">
                <a-upload
                name="avatar"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                :customRequest="selfUpload2"
                :before-upload="beforeUpload"
              >
                <img
                  v-if="entity.idCardBackPhoto"
                  style="width: 120px; height: 120px"
                  :src="entity.idCardBackPhoto"
                  alt="身份证反面照片"
                />
                <div v-else>
                  <a-icon :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">身份证反面照片</div>
                </div>
              </a-upload>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="手持身份证照片" prop="handIdCardNoPhoto">
                <a-upload
                name="avatar"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                :customRequest="selfUpload3"
                :before-upload="beforeUpload"
              >
                <img
                  v-if="entity.handIdCardNoPhoto"
                  style="width: 120px; height: 120px"
                  :src="entity.handIdCardNoPhoto"
                  alt="手持身份证照片"
                />
                <div v-else>
                  <a-icon :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">手持身份证照片</div>
                </div>
              </a-upload>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="银行卡照片" prop="bankCardPhoto">
                <a-upload
                name="avatar"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                :customRequest="selfUpload4"
                :before-upload="beforeUpload"
              >
                <img
                  v-if="entity.bankCardPhoto"
                  style="width: 120px; height: 120px"
                  :src="entity.bankCardPhoto"
                  alt="银行卡照片"
                />
                <div v-else>
                  <a-icon :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">银行卡照片</div>
                </div>
              </a-upload>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
export default {
  props: {
    parentObj: Object,
  },
  data() {
    return {
      activeKey: ['1'], //折叠面板
      customStyle: 'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden',
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 },
      },
      visible: false,
      loading: false,
      entity: {},
      rules: {},
      title: '',
    }
  },
  methods: {
    init() {
      this.visible = true
      this.entity = {}
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    openForm(id, title) {
      this.init()

      if (id) {
        this.loading = true
        this.$http.post('/Base_leasesystem_employee/leasesystem_employee/GetTheData', { id: id }).then((resJson) => {
          this.loading = false

          this.entity = resJson.Data
        })
      }
    },
    handleSubmit() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        this.loading = true
        this.$http.post('/Base_leasesystem_employee/leasesystem_employee/SaveData', this.entity).then((resJson) => {
          this.loading = false

          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false

            this.parentObj.getDataList()
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    },
    selfUpload1({ action, file, onSuccess, onError, onProgress }) {
      this.loading = true
      const formData = new FormData()
      let that = this
      formData.append('file', file)
      this.$http.post('/Base_Manage/Upload/UploadFileByForm', formData).then((res) => {
        this.entity.idCardPhoto = res.url
        this.loading = false
      })
    },
    selfUpload2({ action, file, onSuccess, onError, onProgress }) {
      this.loading = true
      const formData = new FormData()
      formData.append('file', file)
      this.$http.post('/Base_Manage/Upload/UploadFileByForm', formData).then((res) => {
        this.entity.idCardBackPhoto = res.url
        this.loading = false
      })
    },
    selfUpload3({ action, file, onSuccess, onError, onProgress }) {
      this.loading = true
      const formData = new FormData()
      formData.append('file', file)
      this.$http.post('/Base_Manage/Upload/UploadFileByForm', formData).then((res) => {
        this.entity.handIdCardNoPhoto = res.url
        this.loading = false
      })
    },
    selfUpload4({ action, file, onSuccess, onError, onProgress }) {
      this.loading = true
      const formData = new FormData()
      formData.append('file', file)
      this.$http.post('/Base_Manage/Upload/UploadFileByForm', formData).then((res) => {
        this.entity.bankCardPhoto = res.url
        this.loading = false
      })
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!')
      }
      const isLt2M = file.size / 1024 / 1024 < 20
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!')
      }
      return isJpgOrPng && isLt2M
    },
  },
}
</script>
